
<template>
  <div class="dashboard-container">

    <!-- 统计卡片区域 -->
    <div class="stats-section">
      <div class="stats-container">
        <!-- 生产产品总数卡片 -->
        <el-card class="stat-card" :shadow="'hover'">
          <div class="stat-content-wrapper">
            <div class="stat-icon info">
              <Goods />
            </div>
            <div class="stat-content">
              <div class="stat-label">产品总数</div>
              <div class="stat-number">{{ productTotalStats.canNum || 0 }}</div>
            </div>
          </div>
        </el-card>

        <!-- 仓库统计卡片 -->
        <el-card class="stat-card">
          <div class="stat-content-wrapper">
             <div class="stat-icon primary">
              <Box />
            </div>
            <div class="stat-content">
              <div class="stat-label">仓库数量</div>
              <div class="stat-number">{{ productTotalStats.cangKuCount }}</div>
            </div>
          </div>
        </el-card>

        <!-- 产品统计卡片 -->
        <el-card class="stat-card">
          <div class="stat-content-wrapper">
            <div class="stat-icon primary">
              <Box />
            </div>
            <div class="stat-content">
              <div class="stat-label">库区数量</div>
              <div class="stat-number">{{ productTotalStats.kuQuCount }}</div>
            </div>
          </div>
        </el-card>

        <!-- 数据更新时间卡片 -->
        <el-card class="stat-card">
          <div class="stat-content-wrapper">
             <div class="stat-icon primary">
              <Box />
            </div>
            <div class="stat-content">
              <div class="stat-label">储位数量</div>
              <div class="stat-number">{{ productTotalStats.chuWeiCount}}</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 图表统一容器 - 使用一个大的el-card -->
    <div class="charts-section">
      <el-card class="charts-wrapper-card" :shadow="'hover'">
        <div slot="header" class="card-header">
          <h3>数据图表分析</h3>
          <div class="card-actions">
          </div>
        </div>

        <!-- 主要图表区域 -->
        <div class="chart-container">
          <!-- 仓库数量柱形图 -->
          <div class="chart-card">
            <div class="chart-header">
              <h3>仓库数量趋势</h3>
              <div class="chart-actions">
                <el-icon class="action-icon cursor-pointer" @click="refreshData" title="刷新">
                  <Refresh v-if="!isLoading" />
                </el-icon>
                <el-icon class="action-icon cursor-pointer" @click="exportData" title="导出">
                  <Download />
                </el-icon>
              </div>
            </div>
            <div class="chart-content">
              <div ref="trendChart" class="chart"></div>
            </div>
          </div>

          <!-- 产品数量折线图 -->
          <div class="chart-card">
            <div class="chart-header">
              <h3>产品数量趋势</h3>
              <div class="chart-actions">
                <el-icon class="action-icon cursor-pointer" @click="refreshData" title="刷新">
                  <Refresh v-if="!isLoading" />
                </el-icon>
                <el-icon class="action-icon cursor-pointer" @click="exportData" title="导出">
                  <Download />
                </el-icon>
              </div>
            </div>
            <div class="chart-content">
              <div ref="warehouseChart" class="chart"></div>
            </div>
          </div>

          <!-- 扇形图 -->
          <div class="chart-card">
            <div class="chart-header">
              <h3>产品分布统计</h3>
            </div>
            <div class="chart-content">
              <div ref="pieChart" class="chart"></div>
            </div>
          </div>

          <!-- 组合图表（柱形图+折线图）- 放置在饼图的右边 -->
          <div class="chart-card">
            <div class="chart-header">
              <h3>仓库与产品数量组合趋势</h3>
              <div class="chart-actions">
                <el-icon class="action-icon cursor-pointer" @click="refreshData" title="刷新">
                  <Refresh v-if="!isLoading" />
                </el-icon>
                <el-icon class="action-icon cursor-pointer" @click="exportData" title="导出">
                  <Download />
                </el-icon>
              </div>
            </div>
            <div class="chart-content">
              <div ref="combinedChart" class="chart"></div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 最近活动记录表格 -->
    <div class="tables-section">
      <div class="table-container">
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted} from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import {
  Box, Goods,
  Refresh, Download
} from '@element-plus/icons-vue'
import { APIs } from '@/Http/http'
import moment from 'moment'

// 全局扫码状态（模拟数据，实际应从全局store获取）
const globalScanStatus = ref<{ type: string, message: string } | null>(null);

// 数据加载状态
const isLoading = ref(false);

// 产品总数统计数据
const productTotalStats = ref({ canNum: 0 ,cangKuCount:0,kuQuCount:0,chuWeiCount:0})

// 仓库数据
const cangKuData = ref<any[]>([]);

// 图表实例引用
const trendChart = ref<any>(null);
const warehouseChart = ref<any>(null);
const pieChart = ref<any>(null);
const radarChart = ref<any>(null);
const combinedChart = ref<any>(null);

const trendChartInstance = ref<any>(null);
const warehouseChartInstance = ref<any>(null);
const pieChartInstance = ref<any>(null);
const radarChartInstance = ref<any>(null);
const combinedChartInstance = ref<any>(null);

// 窗口大小变化处理函数
const handleResize = () => {
  if (trendChartInstance.value) {
    trendChartInstance.value.resize();
  }
  if (warehouseChartInstance.value) {
    warehouseChartInstance.value.resize();
  }
  if (pieChartInstance.value) {
    pieChartInstance.value.resize();
  }
  if (radarChartInstance.value) {
    radarChartInstance.value.resize();
  }
  if (combinedChartInstance.value) {
    combinedChartInstance.value.resize();
  }
};

// 刷新所有数据和图表
const refreshData = () => {
  // 获取生产产品总数数据
  APIs.get("/api/Read/GetAllTel").then(res=>{
    // 假设API返回的是一个列表，我们从列表中提取数据
    if(res && res.data && Array.isArray(res.data.data)) {
      // 保存完整的仓库数据用于图表
      cangKuData.value = res.data.data;
      // 如果返回的是列表，我们取第一条数据的各统计值
      productTotalStats.value.canNum = res.data.data[0]?.canNum || 0;
      productTotalStats.value.kuQuCount = res.data.data[0]?.kuQuCount || 0;
      productTotalStats.value.chuWeiCount = res.data.data[0]?.chuWeiCount || 0;
      productTotalStats.value.cangKuCount = res.data.data[0]?.cangKuCount || 0;
    } else if(res && res.data) {
      // 如果返回的不是列表，尝试直接获取数据
      cangKuData.value = [res.data];
      productTotalStats.value.canNum = res.data.canNum || 0;
      productTotalStats.value.cangKuCount = res.data.cangKuCount || 0;
      productTotalStats.value.kuQuCount = res.data.kuQuCount || 0;
      productTotalStats.value.chuWeiCount = res.data.chuWeiCount || 0;
    }
    console.log('产品总数数据:', productTotalStats.value.canNum);
    
    // 更新仓库数量柱形图
    initCangKuChart();
    // 新增：更新产品数量折线图
    initProductTrendChart();
    // 新增：更新仓库分布饼图
    initPieChart();
    // 新增：更新组合图表（柱形+折线）
    initCombinedChart();
  })
};

// 初始化仓库数量柱形图
const initCangKuChart = () => {
  // 如果图表实例已存在，先销毁
  if (trendChartInstance.value) {
    trendChartInstance.value.dispose();
  }
  
  // 创建新的图表实例
  trendChartInstance.value = echarts.init(trendChart.value);
  
  // 准备图表数据
  const xAxisData = cangKuData.value.map(item => {
    // 格式化time字段，假设格式为YYYY-MM-DD HH:mm:ss
    return moment(item.time).format('YYYY-MM-DD HH:mm');
  });
  
  const yAxisData = cangKuData.value.map(item => item.cangKuCount || 0);
  
  // 定义图表配置 - 美化版本
  const option = {
    // 图表标题样式优化
    title: {
      show: true,
      text: '仓库数量趋势统计',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: '600',
        color: '#333'
      },
      padding: [0, 0, 10, 0]
    },
    // 图例配置
    legend: {
      data: ['仓库数量'],
      bottom: 0,
      textStyle: {
        color: '#666'
      }
    },
    // 提示框样式优化
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      },
      backgroundColor: 'rgba(0, 0, 0, 0.7)',
      borderColor: '#40a9ff',
      borderWidth: 1,
      textStyle: {
        color: '#fff'
      },
      formatter: function(params: any) {
        const data = params[0];
        return `日期: ${data.name}<br/>仓库数量: <span style="color:#40a9ff;font-weight:bold">${data.value}</span>`;
      },
      padding: 10,
      borderRadius: 4
    },
    // 网格配置优化
    grid: {
      left: '3%',
      right: '4%',
      bottom: '18%', // 增加底部空间，确保图例和标签完全显示
      top: '15%',    // 为标题留出空间
      containLabel: true
    },
    // X轴样式优化
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLabel: {
        interval: 0,
        rotate: 45, // 旋转标签以避免重叠
        color: '#666',
        fontSize: 12,
        fontWeight: '500'
      },
      axisLine: {
        lineStyle: {
          color: '#e8e8e8'
        }
      },
      axisTick: {
        show: true,
        length: 6,
        lineStyle: {
          color: '#e8e8e8'
        }
      }
    },
    // Y轴样式优化
    yAxis: {
      type: 'value',
      name: '仓库数量',
      nameTextStyle: {
        color: '#666',
        fontSize: 12,
        padding: [0, 0, 0, 40]
      },
      axisLabel: {
        formatter: '{value}',
        color: '#666',
        fontSize: 12
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#e8e8e8'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#f0f0f0',
          type: 'dashed'
        }
      },
      axisTick: {
        show: false
      }
    },
    // 系列配置 - 柱形图美化
    series: [
      {
        name: '仓库数量',
        type: 'bar',
        data: yAxisData,
        barWidth: '50%',
        // 柱形图渐变色优化
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#1890ff' },
            { offset: 1, color: '#69c0ff' }
          ]),
          borderRadius: [6, 6, 0, 0],
          // 边框效果
          borderColor: 'rgba(255, 255, 255, 0.8)',
          borderWidth: 1
        },
        // 悬停效果优化
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#40a9ff' },
              { offset: 1, color: '#91d5ff' }
            ]),
            // 悬停时轻微放大效果
            shadowBlur: 10,
            shadowColor: 'rgba(24, 144, 255, 0.3)'
          }
        },
        // 数据标签显示
        label: {
          show: true,
          position: 'top',
          color: '#666',
          fontSize: 12,
          fontWeight: '500',
          formatter: '{c}',
          distance: 5
        },
        // 动画延迟优化
        animationDelay: function(idx: number) {
          return idx * 100;
        }
      }
    ],
    // 动画效果优化
    animationEasing: 'elasticOut',
    animationDelayUpdate: function(idx: number) {
      return idx * 5;
    },
    // 添加动画持续时间
    animationDuration: 1500,
    animationDurationUpdate: 1000
  };
  
  // 设置图表配置
  trendChartInstance.value.setOption(option);
};

// 初始化产品数量折线图 - 新增函数
const initProductTrendChart = () => {
  // 如果图表实例已存在，先销毁
  if (warehouseChartInstance.value) {
    warehouseChartInstance.value.dispose();
  }
  
  // 创建新的图表实例
  warehouseChartInstance.value = echarts.init(warehouseChart.value);
  
  // 准备图表数据 - 使用/api/Read/GetAllTel接口的canNum数据
  const xAxisData = cangKuData.value.map(item => {
    // 格式化time字段，保持与柱形图一致的格式
    return moment(item.time).format('YYYY-MM-DD HH:mm');
  });
  
  const yAxisData = cangKuData.value.map(item => item.canNum || 0);
  
  // 定义图表配置 - 绿色系主题折线图
  const option = {
    // 图表标题
    title: {
      show: true,
      text: '产品数量趋势统计',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: '600',
        color: '#333'
      },
      padding: [0, 0, 10, 0]
    },
    // 图例配置
    legend: {
      data: ['产品数量'],
      bottom: 0,
      textStyle: {
        color: '#666'
      }
    },
    // 提示框样式
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      backgroundColor: 'rgba(0, 0, 0, 0.7)',
      borderColor: '#52c41a',
      borderWidth: 1,
      textStyle: {
        color: '#fff'
      },
      formatter: function(params: any) {
        const data = params[0];
        return `日期: ${data.name}<br/>产品数量: <span style="color:#52c41a;font-weight:bold">${data.value}</span>`;
      },
      padding: 10,
      borderRadius: 4
    },
    // 网格配置
    grid: {
      left: '3%',
      right: '4%',
      bottom: '18%',
      top: '15%',
      containLabel: true
    },
    // X轴样式
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData,
      axisLabel: {
        interval: 0,
        rotate: 45,
        color: '#666',
        fontSize: 12
      },
      axisLine: {
        lineStyle: {
          color: '#e8e8e8'
        }
      }
    },
    // Y轴样式
    yAxis: {
      type: 'value',
      name: '产品数量',
      nameTextStyle: {
        color: '#666',
        fontSize: 12,
        padding: [0, 0, 0, 40]
      },
      axisLabel: {
        formatter: '{value}',
        color: '#666',
        fontSize: 12
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#e8e8e8'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#f0f0f0',
          type: 'dashed'
        }
      }
    },
    // 系列配置 - 折线图
    series: [
      {
        name: '产品数量',
        type: 'line',
        stack: '总量',
        areaStyle: {
          // 区域填充渐变
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(82, 196, 26, 0.3)' },
            { offset: 1, color: 'rgba(82, 196, 26, 0.05)' }
          ])
        },
        emphasis: {
          focus: 'series',
          itemStyle: {
            color: '#73d13d',
            borderColor: '#fff',
            borderWidth: 3,
            shadowBlur: 10,
            shadowColor: 'rgba(82, 196, 26, 0.5)'
          },
          symbolSize: 12
        },
        lineStyle: {
          // 线条样式优化
          color: '#52c41a',
          width: 3,
          type: 'solid'
        },
        // 平滑曲线
        smooth: true,
        // 数据点样式
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#52c41a',
          borderColor: '#fff',
          borderWidth: 2
        },
        // 数据标签
        label: {
          show: true,
          position: 'top',
          color: '#666',
          fontSize: 10,
          formatter: '{c}'
        },
        data: yAxisData,
        // 动画效果
        animationDelay: function(idx: number) {
          return idx * 100;
        }
      }
    ],
    // 全局动画设置
    animationEasing: 'elasticOut',
    animationDelayUpdate: function(idx: number) {
      return idx * 5;
    },
    animationDuration: 1500,
    animationDurationUpdate: 1000
  };
  
  // 设置图表配置
  warehouseChartInstance.value.setOption(option);
};

// 初始化仓库分布饼图 - 新增函数
const initPieChart = () => {
  // 如果图表实例已存在，先销毁
  if (pieChartInstance.value) {
    pieChartInstance.value.dispose();
  }
  
  // 创建新的图表实例
  pieChartInstance.value = echarts.init(pieChart.value);
  
  // 准备图表数据 - 使用productTotalStats中的仓库相关数据
  const pieData = [
    {
      value: productTotalStats.value.cangKuCount || 0,
      name: '仓库数量',
      itemStyle: {
        color: '#1890ff'
      }
    },
    {
      value: productTotalStats.value.kuQuCount || 0,
      name: '库区数量',
      itemStyle: {
        color: '#52c41a'
      }
    },
    {
      value: productTotalStats.value.chuWeiCount || 0,
      name: '储位数量',
      itemStyle: {
        color: '#faad14'
      }
    }
  ];
  
  // 定义饼图配置
  const option = {
    // 图表标题
    title: {
      show: true,
      text: '仓库分布统计',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: '600',
        color: '#333'
      },
      padding: [0, 0, 10, 0]
    },
    // 图例配置
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 'center',
      textStyle: {
        color: '#666',
        fontSize: 12
      }
    },
    // 提示框样式
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.7)',
      borderColor: '#666',
      borderWidth: 1,
      textStyle: {
        color: '#fff'
      },
      formatter: function(params: any) {
        return `${params.name}: <span style="color:${params.color};font-weight:bold">${params.value}</span><br/>占比: ${params.percent}%`;
      },
      padding: 10,
      borderRadius: 4
    },
    // 饼图配置
    series: [
      {
        name: '仓库分布',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['60%', '50%'],
        avoidLabelOverlap: false,
        // 饼图文本标签
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}: {c}\n({d}%)',
          color: '#666',
          fontSize: 12,
          fontWeight: '500'
        },
        // 连接线样式
        labelLine: {
          show: true,
          length: 10,
          length2: 15,
          lineStyle: {
            color: '#d9d9d9'
          }
        },
        // 饼图数据
        data: pieData,
        // 饼图扇区样式
        itemStyle: {
          borderRadius: 4,
          borderColor: '#fff',
          borderWidth: 2,
          // 悬停效果
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        // 动画效果
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function(idx: number) {
          return idx * 200;
        },
        animationDuration: 1500
      }
    ]
  };
  
  // 设置图表配置
  pieChartInstance.value.setOption(option);
};

// 初始化组合图表（柱形图+折线图）
const initCombinedChart = () => {
  // 如果图表实例已存在，先销毁
  if (combinedChartInstance.value) {
    combinedChartInstance.value.dispose();
  }
  
  // 创建新的图表实例
  combinedChartInstance.value = echarts.init(combinedChart.value);
  
  // 准备图表数据
  const xAxisData = cangKuData.value.map(item => {
    // 格式化time字段，保持与其他图表一致的格式
    return moment(item.time).format('YYYY-MM-DD HH:mm');
  });
  
  const cangKuCountData = cangKuData.value.map(item => item.cangKuCount || 0);
  const canNumData = cangKuData.value.map(item => item.canNum || 0);
  
  // 定义图表配置 - 组合图表
  const option = {
    // 图表标题
    title: {
      show: true,
      text: '仓库数量与产品数量组合统计',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: '600',
        color: '#333'
      },
      padding: [0, 0, 10, 0]
    },
    // 图例配置
    legend: {
      data: ['仓库数量', '产品数量'],
      bottom: 0,
      textStyle: {
        color: '#666'
      }
    },
    // 提示框样式
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      backgroundColor: 'rgba(0, 0, 0, 0.7)',
      borderColor: '#40a9ff',
      borderWidth: 1,
      textStyle: {
        color: '#fff'
      },
      formatter: function(params: any) {
        let result = `日期: ${params[0].name}<br/>`;
        params.forEach((item: any) => {
          const color = item.seriesName === '仓库数量' ? '#1890ff' : '#52c41a';
          result += `${item.seriesName}: <span style="color:${color};font-weight:bold">${item.value}</span><br/>`;
        });
        return result;
      },
      padding: 10,
      borderRadius: 4
    },
    // 网格配置
    grid: {
      left: '3%',
      right: '4%',
      bottom: '18%',
      top: '15%',
      containLabel: true
    },
    // X轴样式
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLabel: {
        interval: 0,
        rotate: 45,
        color: '#666',
        fontSize: 12
      },
      axisLine: {
        lineStyle: {
          color: '#e8e8e8'
        }
      }
    },
    // Y轴样式 - 双Y轴
    yAxis: [
      {
        type: 'value',
        name: '仓库数量',
        nameTextStyle: {
          color: '#666',
          fontSize: 12,
          padding: [0, 0, 0, 40]
        },
        axisLabel: {
          formatter: '{value}',
          color: '#1890ff',
          fontSize: 12
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#1890ff'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#f0f0f0',
            type: 'dashed'
          }
        }
      },
      {
        type: 'value',
        name: '产品数量',
        nameTextStyle: {
          color: '#666',
          fontSize: 12,
          padding: [0, 40, 0, 0]
        },
        axisLabel: {
          formatter: '{value}',
          color: '#52c41a',
          fontSize: 12
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#52c41a'
          }
        },
        splitLine: {
          show: false
        }
      }
    ],
    // 系列配置 - 组合图表
    series: [
      {
        name: '仓库数量',
        type: 'bar',
        data: cangKuCountData,
        barWidth: '40%',
        // 柱形图渐变色
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#1890ff' },
            { offset: 1, color: '#69c0ff' }
          ]),
          borderRadius: [6, 6, 0, 0]
        },
        // 悬停效果
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#40a9ff' },
              { offset: 1, color: '#91d5ff' }
            ]),
            shadowBlur: 10,
            shadowColor: 'rgba(24, 144, 255, 0.3)'
          }
        },
        // 数据标签
        label: {
          show: true,
          position: 'top',
          color: '#666',
          fontSize: 12,
          formatter: '{c}'
        },
        // 动画延迟
        animationDelay: function(idx: number) {
          return idx * 100;
        }
      },
      {
        name: '产品数量',
        type: 'line',
        yAxisIndex: 1, // 使用第二个Y轴
        data: canNumData,
        // 线条样式
        lineStyle: {
          color: '#52c41a',
          width: 3
        },
        // 平滑曲线
        smooth: true,
        // 数据点样式
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#52c41a',
          borderColor: '#fff',
          borderWidth: 2
        },
        // 悬停数据点样式
        emphasis: {
          itemStyle: {
            color: '#73d13d',
            borderColor: '#fff',
            borderWidth: 3,
            shadowBlur: 10,
            shadowColor: 'rgba(82, 196, 26, 0.5)'
          },
          symbolSize: 12
        },
        // 数据标签
        label: {
          show: true,
          position: 'top',
          color: '#666',
          fontSize: 12,
          formatter: '{c}'
        },
        // 动画延迟
        animationDelay: function(idx: number) {
          return idx * 100 + 50;
        }
      }
    ],
    // 全局动画设置
    animationEasing: 'elasticOut',
    animationDelayUpdate: function(idx: number) {
      return idx * 5;
    },
    animationDuration: 1500,
    animationDurationUpdate: 1000
  };
  
  // 设置图表配置
  combinedChartInstance.value.setOption(option);
};

// 模拟全局扫码状态变化
const simulateScanStatus = () => {
  // 实际应用中应从全局store中获取扫码状态
  setTimeout(() => {
    globalScanStatus.value = {
      type: 'scanning',
      message: '正在扫描...'
    };

    setTimeout(() => {
      globalScanStatus.value = {
        type: 'success',
        message: '扫描成功: PROD-20240520-001'
      };

      setTimeout(() => {
        globalScanStatus.value = null;
      }, 3000);
    }, 1000);
  }, 5000);
};

// 导出函数
const exportData = () => {
  ElMessage.success('数据导出成功');
};

// 生命周期钩子
onMounted( () => {
  // 初始化图表
  refreshData()

  // 添加窗口大小变化监听
  window.addEventListener('resize', handleResize);

  // 模拟扫码状态变化（实际应用中应从全局store获取）
  simulateScanStatus();
});

// 组件卸载时清理资源
onUnmounted(() => {
  // 移除窗口大小变化监听
  window.removeEventListener('resize', handleResize);

  // 销毁图表实例
  if (trendChartInstance.value) {
    trendChartInstance.value.dispose();
    trendChartInstance.value = null;
  }

  if (warehouseChartInstance.value) {
    warehouseChartInstance.value.dispose();
    warehouseChartInstance.value = null;
  }

  if (pieChartInstance.value) {
    pieChartInstance.value.dispose();
    pieChartInstance.value = null;
  }

  if (radarChartInstance.value) {
    radarChartInstance.value.dispose();
    radarChartInstance.value = null;
  }

  if (combinedChartInstance.value) {
    combinedChartInstance.value.dispose();
    combinedChartInstance.value = null;
  }
});
</script>

<style scoped>
.dashboard-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 页面头部样式 - 保留但注释掉，因为在当前结构中没有使用 */
/* 
.page-header {
  margin-bottom: 30px;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  color: white;
}

.title-icon {
  font-size: 32px;
  color: white;
  animation: pulse 2s infinite;
}

/* 图标脉冲动画 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.page-description {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 全局扫码状态指示器 */
.scan-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  min-width: 180px;
  justify-content: center;
}

.scan-status-indicator.scanning {
  background: rgba(255, 255, 255, 0.2);
}

.scan-status-indicator.success {
  background: rgba(82, 196, 26, 0.2);
  border-color: rgba(82, 196, 26, 0.3);
}

.scan-status-indicator.error {
  background: rgba(255, 77, 79, 0.2);
  border-color: rgba(255, 77, 79, 0.3);
}

.status-icon {
  font-size: 14px;
}

/* 统计卡片样式 */
.stats-section {
  margin: 0 0 24px 0;
}

.stats-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
  border: none;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.stat-content-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon.success {
  background: linear-gradient(135deg, #52c41a, #73d13d);
}

.stat-icon.primary {
  background: linear-gradient(135deg, #1890ff, #40a9ff);
}

.stat-icon.info {
  background: linear-gradient(135deg, #13c2c2, #36cfc9);
}

.stat-icon.danger {
  background: linear-gradient(135deg, #ff4d4f, #ff7875);
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #8c8c8c;
  margin-bottom: 4px;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #262626;
  margin-bottom: 8px;
  line-height: 1;
}

.stat-change {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.stat-change .up {
  color: #52c41a;
}

.stat-change .down {
  color: #ff4d4f;
}

.stat-change .vs {
  color: #8c8c8c;
}

.stat-progress {
  width: 100%;
}

/* 控制区域样式 */
.control-section {
  margin-bottom: 24px;
}

.control-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.control-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.control-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 图表区域样式 */
.charts-section {
  margin-bottom: 20px;
}

/* 统一的图表大卡片容器 */
.charts-wrapper-card {
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.chart-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.chart-actions {
  display: flex;
  gap: 12px;
}

.chart-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
  padding: 20px;
}

.chart-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.chart-card.full-width {
  grid-column: 1 / -1;
}

.chart-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chart-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.chart-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-icon {
  font-size: 16px;
  color: #8c8c8c;
  transition: color 0.3s ease;
}

.action-icon:hover {
  color: #1890ff;
}

.chart-content {
  position: relative;
  height: 300px;
}

.chart {
  width: 100%;
  height: 100%;
}

/* 数据表格区域样式 */
.tables-section {
  margin-bottom: 20px;
}

.table-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.table-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.table-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.table-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #262626;
}

.table-actions {
  display: flex;
  gap: 8px;
}

/* 滚动条样式优化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .chart-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 30px 0 20px 0;
  }

  .header-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .page-title {
    font-size: 24px;
  }

  .title-icon {
    font-size: 28px;
  }

  .stats-container {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-number {
    font-size: 28px;
  }

  .stat-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }

  .control-container {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .control-left {
    flex-wrap: wrap;
  }

  .chart-content {
    height: 250px;
  }

  .scan-status-indicator {
    min-width: auto;
  }
}

.cursor-pointer {
  cursor: pointer;
}

.mr-2 {
  margin-right: 8px;
}

.mr-4 {
  margin-right: 16px;
}

.ml-2 {
  margin-left: 8px;
}

.ml-4 {
  margin-left: 16px;
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.dashboard-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.tables-section {
  margin-bottom: 20px;
}

/* 优化图表容器响应式布局 */
.chart-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* 修复表格容器样式 */
.table-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}
</style>